<template>
    <!-- 图标选择 -->
    <div class="menuIcon" id="menuIcon" style="display:none">
        <div class="coverageTitle" @mousedown="mousedown" @mouseup="mouseup" @mouseout="mouseup">
            <div class="coverageTitleName">
                <!-- <img class="btnsImages" src="@/assets/image/btns/layer.png" alt="" /> -->
                <i class="el-icon-picture-outline"></i>
                标绘样式选择
            </div>
            <i class="el-icon-close closeIcon" title="关闭" @click="setCoverage"></i>
        </div>
        <div class="propertyBox">
            <div class="menuIconIsSelect">
                <img v-if="defaultUrl" :src="defaultUrl" alt="" class="menuIconImage" />
                <div v-else class="menuIconImage"></div>
                <input type="text" class="menuIconUrl" v-model="defaultUrl" />
            </div>
            <div class="iconBox">
                <el-scrollbar wrap-class="scrollbar-wrapper">
                    <ul class="iconsItemUl" v-if="iconsItem">
                        <li class="iconsItem" :class="item.iconUrl == defaultUrl ? 'isSelectImg' : ''" v-for="item in iconsItem" :key="item.id" @click="selectImage(item)">
                            <img :src="item.iconUrl" :title="item.specifications" class="iconsItemImg" />
                        </li>
                    </ul>
                </el-scrollbar>
            </div>
            <div class="menuIconBtns">
                <el-upload class="avatar-uploader" action="#" :show-file-list="false" accept=".png,.jpg" :file-list="fileList" :http-request="uploadFile">
                    <el-button type="primary" class="menuIconBtnItem">自定义图标</el-button>
                </el-upload>
                <el-button type="primary" class="menuIconBtnItem" @click="imageNone">无图标</el-button>
                <el-button type="primary" class="menuIconBtnItem" @click="submit">确定</el-button>
                <el-button type="primary" class="menuIconBtnItem" @click="setCoverage">取消</el-button>
            </div>
        </div>
    </div>
</template>
<script>
import { mousedown, mouseup } from '../../utils/move.el'
import { modelBase, getMarkerIconList } from '@/components/tool/tools/utils/modelBase.js'
export default {
    name: 'menuIcon',
    props: ['url'],
    components: {
        // tableForm
    },
    data() {
        return {
            iconsItem: '',
            defaultUrl: this.url,
            fileList: []
        }
    },
    computed: {
        menuIconIsShow() {
            return this.$store.state.menuIcon
        }
    },
    watch: {
        menuIconIsShow(newData) {
            let el = document.getElementById('menuIcon')
            el.style.left = '300px'
            el.style.top = '48px'
        },
        url: function(params) {
            this.defaultUrl = this.url
        }
    },
    mounted() {
        this.getMarkerIcon()
    },
    methods: {
        handleBefore(file) {
            console.log(file)
        },
        uploadFile(e) {
            const file = e.file
            let fileNme = file.name
            let fromData = new FormData()
            fromData.append('file', file)
            fromData.append('baseId', sessionStorage.getItem('baseId'))
            fromData.append('specifications', 1)
            fromData.append('specificationsType', 'PLANPOINT')
            this.$request.uploading('/api/map/MapCodeController/customPointIcon', fromData).then(res => {
                if (res.code == 200) {
                    this.getMarkerIcon()
                    getMarkerIconList()
                    // modelBase()
                    this.defaultUrl = res.data.iconUrl
                }
            })
        },
        submit() {
            let data = {}
            this.iconsItem.forEach(item => {
                if (item.iconUrl == this.defaultUrl) {
                    data.specifications = item.specifications
                    data.iconUrl = item.iconUrl
                }
            })
            this.$emit('imageUrl', data)
            this.setCoverage()
        },
        setCoverage() {
            this.$store.commit('setMenuIcon')
        },
        // 移动对话框
        mousedown(e) {
            mousedown(e, 'menuIcon', 'left')
        },
        mouseup() {
            mouseup()
        },
        getMarkerIcon() {
            // const baseId = this.$route.query.baseId
            if (sessionStorage.getItem('baseId')) {
                this.$request
                    .get('api/map/MapCodeController/getMapIcon', {
                        baseId: sessionStorage.getItem('baseId'),
                        specificationsType: ''
                    })
                    .then(res => {
                        if (res.code == 200) {
                            this.iconsItem = res.data
                        }
                    })
            }
        },
        selectImage(item) {
            this.defaultUrl = item.iconUrl
        },
        imageNone() {
            this.defaultUrl = ''
        }
    }
}
</script>
<style lang="scss" scoped>
.menuIcon {
    position: fixed;
    width: 422px;
    // height: calc(100vh - 570px);
    min-height: 130px;
    top: 48px;
    left: 300px;
    z-index: 3000;
    background: rgba(30, 36, 50, 0.6);
    border-color: rgba(32, 160, 255, 0.3);
    border: 1px solid;
    border-radius: 2px;

    .coverageTitle {
        width: 100%;
        height: 40px;
        line-height: 40px;
        border-bottom: 1px solid rgba(32, 160, 255, 0.3);
        display: flex;
        justify-content: space-between;
        padding: 0 15px 0 10px;
        align-items: center;
        cursor: move;
        .coverageTitleName {
            color: #ffffff;
            font-size: 12px;
            .btnsImages {
                width: 13px;
                height: 13px;
                vertical-align: middle;
            }
        }
        .closeIcon {
            cursor: pointer;
            color: #ffffff;
            font-size: 13px;
        }
    }
    .propertyBox {
        padding: 2px;
        width: 100%;
        height: calc(100% - 76px);
        overflow: hidden;
        .el-scrollbar {
            width: 100%;
            height: 100%;
        }
        .menuIconIsSelect {
            width: 100%;
            display: flex;
            .menuIconImage {
                height: 28px;
                width: 28px;
                margin-right: 10px;
                vertical-align: middle;
            }
            .menuIconUrl {
                width: calc(100% - 40px);
                height: 28px;
                border: 1px solid #e6e6e6;
                outline: none;
                background: none;
                color: #ffffff;
            }
        }
        .iconBox {
            width: 100%;
            height: 300px;
            border: 1px solid rgba(32, 160, 255, 0.3);
            margin-top: 2px;
            overflow: hidden;
            .iconsItemUl {
                padding: 2px;
                margin: 0;
                .iconsItem {
                    width: 32px;
                    height: 32px;
                    display: inline-block;
                    margin-top: 10px;
                    margin-left: 10px;
                    border: 1px solid #e6e6e6;
                    &:nth-child(10n + 1) {
                        margin-left: 0;
                    }
                    &:hover {
                        border-color: rgba(32, 160, 255, 0.3);
                    }
                    .iconsItemImg {
                        width: 100%;
                        height: 100%;
                        object-fit: fill;
                        cursor: pointer;
                    }
                }
                .isSelectImg {
                    border: 1px solid rgba(32, 160, 255, 0.5);
                    background: rgba(32, 160, 255, 0.3);
                }
            }
        }
        .menuIconBtns {
            margin-top: 2px;
            display: flex;
            justify-content: space-between;
            .avatar-uploader {
                margin-right: 10px;
            }
            .menuIconBtnItem {
                width: 95px;
            }
        }
    }
}
</style>
